import { View, FlatList, StyleSheet, RefreshControl, Pressable } from 'react-native';
import { useState, useCallback } from 'react';
import { router } from 'expo-router';
import { Image } from 'expo-image';
import { Text } from '@/components/Themed';

export default function NewsList({ categoryId }: { categoryId: number }) {
  const [refreshing, setRefreshing] = useState(false);
  const [news] = useState([
    {
      id: 1,
      title: '科技创新引领未来：AI技术突破性进展',
      image: 'https://picsum.photos/200/200?random=1',
      summary: '最新研究显示，人工智能技术在医疗诊断领域取得重大突破...',
    },
    {
      id: 2,
      title: '全球气候变化：各国积极应对环境挑战',
      image: 'https://picsum.photos/200/200?random=2',
      summary: '联合国气候大会召开，各国代表共同商讨环保措施...',
    },
    {
      id: 3,
      title: '体育盛事：世界杯精彩回顾',
      image: 'https://picsum.photos/200/200?random=3',
      summary: '本届世界杯创造多项新纪录，精彩比赛让观众印象深刻...',
    },
    {
      id: 4,
      title: '文化艺术：博物馆夜游活动引关注',
      image: 'https://picsum.photos/200/200?random=4',
      summary: '全国多地博物馆推出夜间参观活动，深受年轻人欢迎...',
    },
    {
      id: 5,
      title: '教育改革：新政策促进教育公平',
      image: 'https://picsum.photos/200/200?random=5',
      summary: '教育部发布新政策，着力解决教育资源分配不均问题...',
    },
  ]);

  /*
  const [news, setNews] = useState<NewsItem[]>([]);
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);

  const fetchNews = async () => {
    try {
      setLoading(true);
      const data = await newsService.getNewsList(categoryId);
      setNews(data.items);
    } catch (error) {
      console.error('获取新闻列表失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const onRefresh = useCallback(async () => {
    setRefreshing(true);
    await fetchNews();
    setRefreshing(false);
  }, [categoryId]);

  useEffect(() => {
    fetchNews();
  }, [categoryId]);
  */

  const onRefresh = useCallback(() => {
    setRefreshing(true);
    // TODO: 刷新数据
    setTimeout(() => setRefreshing(false), 2000);
  }, []);

  const renderItem = ({ item }: { item: { id: number; title: string; summary: string; image: string } }) => (
    <Pressable
      style={styles.newsItem}
      onPress={() =>
        router.push({
          pathname: '/news/[id]',
          params: {
            id: item.id,
            title: item.title,
          },
        })
      }
    >
      <Image source={item.image} style={styles.newsImage} />
      <View style={styles.newsContent}>
        <Text style={styles.newsTitle}>{item.title}</Text>
        <Text style={styles.newsSummary}>{item.summary}</Text>
      </View>
    </Pressable>
  );

  return (
    <FlatList
      data={news}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
      refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
      style={styles.container}
    />
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  newsItem: {
    flexDirection: 'row',
    padding: 15,
    backgroundColor: '#fff',
    marginBottom: 1,
  },
  newsImage: {
    width: 100,
    height: 80,
    borderRadius: 8,
  },
  newsContent: {
    flex: 1,
    marginLeft: 15,
    backgroundColor: 'transparent',
  },
  newsTitle: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 5,
  },
  newsSummary: {
    fontSize: 14,
    color: '#666',
  },
});
